<?php echo $this->render('/public/header'); ?>
<?php use yii\helpers\Url; ?>
    <style>
        .input-noboder {
            border: none;
            padding: 0px;
            margin: 0px;
        }
    </style>
    <script src="https://cdn.bootcss.com/element-ui/1.4.2/index.js"></script>
    <link href="https://cdn.bootcss.com/element-ui/1.4.2/theme-default/index.css" rel="stylesheet">
    <style>
        input[type=file] {
            display: none
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }
        .el-upload-dragger{
            width:80px
        }
    </style>
    <div class="col-lg-12" id="main">
        <a href="javascript:window.history.go(-1);" class="layui-btn layui-btn-normal" style="margin-left:25px">返回</a>
        <br/>
        <br/>
        <div class="col-lg-12 col-md-12" id="tableController">
            <div class="col-lg-4 col-md-4">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon" style="width:100px">buyer</div>
                        <!-- <input type="text" class="form-control" v-model="customer_info.buyer"> -->
                        <el-autocomplete v-model="customer_info.buyer" :fetch-suggestions="querySearchAsync"
                                         placeholder="搜索用户" @select="handleSelect"></el-autocomplete>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon" style="width:100px">Address</div>
                        <input type="text" class="form-control" v-model="customer_info.address">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon" style="width:100px">客户Email</div>
                        <input type="text" class="form-control" v-model="customer_info.email">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon" style="width:100px">tel</div>
                        <input type="text" class="form-control" v-model="customer_info.tel">
                    </div>
                </div>
            </div>
            <br/>
            <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon" style="width:100px">date</div>
                        <input type="date" style="width:201px" class="form-control" v-model="date">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon" style="width:100px">Sale rep</div>
                        <input type="text" class="form-control" v-model="sale_rep">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon" style="width:100px">email</div>
                        <input type="text" class="form-control" v-model="email">
                    </div>
                </div>
            </div>
            <br/>
            <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                <div style="float: right">
                    <el-switch name="extra_fee" v-model="extra_fee_show" on-color="#13ce66" on-text="开启额外费用"
                               off-text="关闭额外费用" width=100 on-value="true" off-value="false" off-color="#ff4949"
                               :on-change="this.handleextra_fee()">
                    </el-switch>
                    <el-switch name="subtotal" v-model="subtotal_show" on-color="#13ce66" on-text="开启总额" off-text="关闭总额"
                               width=100 on-value="true" off-value="false" off-color="#ff4949"
                               :on-change="this.handlesubtotal()">
                    </el-switch>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>Item Name</th>
                            <th style="width:80px">上传图片</th>
                            <th style="width:140px">图片预览</th>
                            <th style="width:300px">Description</th>
                            <th>Price</th>
                            <th>Qty (pcs)</th>
                            <th>单位</th>
                            <th>Extra Fee</th>
                            <th>Subtotal</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(i,k) in list">
                            <td><input style="width:100%;" v-model="i.item"/></td>
                            <td>
                                <div class="source" style="width:100px">
                                    <el-upload
                                            :width=100
                                            :show-file-list=false
                                            :drag=true
                                            :name="'img_'+k" class="upload-demo" action="/sell/upload_img"
                                            :on-success="handlesuccess">
                                        <i class="el-icon-upload"></i>
                                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                    </el-upload>
                                </div>
                            </td>
                            <td>
                                <div v-for="(img,k2) in i.img_src" style="width:120px">
                                    <i class="middleImg icon tu_04" @click="del_img(k,k2)" style="float:right"></i>
                                    <img :src="img" style="max-width:100px"/>
                                </div>
                            </td>
                            <td><textarea onkeyup="Base.adjustObjHeight(this, 50)"
                                          style="width:100%;height:35px;overflow:hidden"
                                          v-model="i.description"></textarea></td>
                            <td>
                                <img src="/statics/img/dollar.png" style="width:20px;height:20px;float:left"/>
                                <input type="number" style="width:80%" v-model="i.price"/>
                            </td>
                            <td><input type="number" style="width:80%" v-model="i.pcs"/></td>
                            <td>
                                <select class="form-control" v-model="i.unit">
                                    <option v-for="i in unit">{{i}}</option>
                                </select>
                            </td>
                            <td><input type="number" style="width:100%" v-model="i.extra_fee"/></td>
                            <td>{{(i.price*i.pcs+parseFloat(i.extra_fee)).toFixed(2)}}</td>
                            <td>
                                <i class="middleImg icon tu_09" @click="del_list(k)"></i>
                                <i class="middleImg icon tu_10" @click="add_list()"></i>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top:20px">
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <label>Service Fee</label>
                        <div class="form-inline">
                            <input type="text" placeholder="服务费描述" class="form-control" v-model="service.description"/>
                            <input type="number" style="width:100px" class="form-control" placeholder="服务费金额"
                                   v-model="service.fee"/>
                            <el-switch v-model="service.show" on-color="#13ce66" off-color="#ff4949" on-value="true"
                                       off-value="false">
                            </el-switch>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <label>Shipping Fee</label>
                        <div class="form-inline">
                            <input type="text" placeholder="运费描述" class="form-control" v-model="ship.description"/>
                            <input type="number" style="width:100px" class="form-control" placeholder="运费金额"
                                   v-model="ship.fee"/>
                            <el-switch v-model="ship.show" on-color="#13ce66" off-color="#ff4949" on-value="true"
                                       off-value="false">
                            </el-switch>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <label>Custom Duty</label>
                        <div class="form-inline">
                            <input type="text" placeholder="税费描述" class="form-control" v-model="duty.description"/>
                            <input type="number" style="width:100px" class="form-control" placeholder="税费金额"
                                   v-model="duty.fee"/>
                            <el-switch v-model="duty.show" on-color="#13ce66" on-value="true" off-value="false"
                                       off-color="#ff4949">
                            </el-switch>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <label>总额显示</label>

                        <div class="form-inline">
                            <span>总金额:</span>
                            <span>{{amount}}</span>
                            <el-switch v-model="total_amount_show" on-color="#13ce66" off-color="#ff4949"
                                       on-value="true" off-value="false">
                            </el-switch>
                        </div>
                    </div>

                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top:20px">
                    <label>报价备注</label>
                    <br/>
                    <ul class="list-group">
                        <li class="list-group-item" style="padding:0;border:none;margin:2px" v-for="(i,k) in this.para">
                            <input type="text" v-model="i.p" style="width:100%;font-weight: bold" v-if="k==1 || k==3"/>
                            <input type="text" v-model="i.p" style="width:100%;" v-else/>
                        </li>
                    </ul>
                </div>
                <br/>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <button type="submit" class="btn btn-primary" @click="upload()">确认添加</button>
                </div>
                <input type="hidden" :value="service_fee">
            </div>
        </div>
        <script>
            var vm = new Vue({
                el: "#tableController",
                data: {
                    list: [{
                        "item": "",
                        img_src: [],
                        description: "",
                        price: 0,
                        "pcs": 1,
                        'unit': 'pcs',
                        extra_fee: 0,
                        subtotal: 0
                    }, {
                        "item": "",
                        img_src: [],
                        description: "",
                        price: 0,
                        "pcs": 1,
                        'unit': 'pcs',
                        extra_fee: 0,
                        subtotal: 0
                    }, {
                        "item": "",
                        img_src: [],
                        description: "",
                        price: 0,
                        "pcs": 1,
                        'unit': 'pcs',
                        extra_fee: 0,
                        subtotal: 0
                    },],
                    number: "",
                    email: "<?php echo $this->params['param']['email'];?>",
                    sale_rep: "<?php echo $this->params['param']['sale_rep'];?>",
                    date: "<?php echo date('Y-m-d');?>",
                    customer_info: {
                        buyer: "",
                        address: "",
                        email: "",
                        tel: ""
                    },
                    para: [{
                        "p": "This quotation is only valid for maximum 10 days."
                    }, {
                        "p": "1. Payment Term"
                    }, {
                        "p": "30% deposit before producing, and the balance before shipping."
                    }, {
                        "p": "2. Producing Time"
                    }, {
                        "p": "The merchandise will be ready for shipping in 10-15 days, after receiving the deposit."
                    }],
                    service: {
                        show: false,
                        description: "",
                        fee: 0
                    },
                    ship: {
                        show: false,
                        description: "",
                        fee: 0
                    },
                    duty: {
                        show: false,
                        description: "",
                        fee: 0
                    },
                    subtotal_show: "true",
                    extra_fee_show: "true",
                    total_amount_show: "true",
                    unit: <?php echo json_encode(yii::$app->params['unit']);?>,
                    service_fee2: ''

                },
                computed: {
                    service_fee: function () {
                        var l = this.list.length;
                        var sum = 0;
                        for (var i = 0; i < l; i++) {
                            if (this.list[i].price != 0) {
                                sum += this.list[i]['price'] * this.list[i]['pcs'] + parseFloat(this.list[i].extra_fee);
                            }

                        }
                        const fee = Base.service_fee(sum);
                        this.service.fee = fee;
                        return fee;
                    },
                    amount: function () {
                        var total = 0;
                        for (var i in this.list) {
                            total += this.list[i]['price'] * this.list[i]['pcs'] + parseFloat(this.list[i].extra_fee)
                        }
                        if (this.service.show == 'true') {
                            total += parseFloat(this.service.fee);
                        }
                        if (this.ship.show == 'true') {
                            total += parseFloat(this.ship.fee);
                        }
                        if (this.duty.show == 'true') {
                            total += parseFloat(this.duty.fee);
                        }
                        return total.toFixed(2);
                    }
                },

                watch: {
                    service_fee: function (v) {
                        this.service.fee = v;
                    }
                },

                methods: {
                    handlesuccess: function (res) {
                        if (res.code == 1) {
                            var k = res.name.split("_")[1];
                            if (this.list[k].img_src.length >= 1) {
                                this.$message({
                                    type: "error",
                                    message: "当前只支持一张图片"
                                })
                            } else {
                                this.list[k].img_src.push(res.msg);
                            }


                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }
                    },
                    del_img: function (listk, imgk) {
                        this.list[listk].img_src.splice(imgk, 1);
                    },
                    del_list: function (k) {
                        if (this.list.length == 1) {
                            layer.alert("不能再删除了哦");
                            return false;
                        }
                        this.list.splice(k, 1);
                    },
                    add_list: function () {
                        this.list.push({
                            "item": "",
                            img_src: [],
                            description: "",
                            price: 0,
                            "pcs": 1,
                            extra_fee: 0,
                            subtotal: ""
                        });

                        setTimeout(function () {
                            vm.handleextra_fee();
                            vm.handlesubtotal();
                        }, 1);
                    },
                    upload: function () {
                        if (!this.customer_info.buyer) {
                            layer.alert("客户名称未填");
                            return false;
                        }
                        if (!this.list[0].item) {
                            layer.alert("没有报价产品");
                            return false;
                        }
                        var url = "<?php echo Url::to(['sell/add_quote']);?>";
                        for (k in this.list) {
                            this.list[k]['subtotal'] = this.list[k]['price'] * this.list[k]['pcs'] + parseFloat(this.list[k]['extra_fee']);
                        }
                        var str = JSON.stringify(this.list);
                        var data = {
                            date: this.date,
                            list: str,
                            number: this.number,
                            email: this.email,
                            sale_rep: this.sale_rep,
                            customer_info: this.customer_info,
                            para: this.para,
                            service: this.service,
                            ship: this.ship,
                            duty: this.duty,
                            extra_fee_show: this.extra_fee_show,
                            subtotal_show: this.subtotal_show,
                            total_amount_show: this.total_amount_show
                        };
                        $.post(url, data, function (res) {
                            if (res.code != 1) {
                                layer.alert(res.msg);
                            } else {
                                layer.confirm(res.msg, {}, function () {
                                    window.location.href = "/sell/quote_edit?id=" + res.id;
                                })
                            }

                        }, 'json')
                    },
                    querySearchAsync: function (queryString, cb) {
                        if (queryString != "") {
                            $.post('/api/search_customer_by_like', {
                                name: queryString
                            }, function (res) {
                                if (res.data) {
                                    cb(res.data);
                                }

                            }, 'json')
                        }

                    },
                    handleSelect: function (item) {
                        this.customer_info.buyer = item.value;
                        this.customer_info.email = item.email;
                        this.number = item.number;
                    },
                    handleextra_fee: function () {
                        if (this.extra_fee_show == 'false') {
                            $("table tr").find("th:eq(7)").hide();
                            $("table tr").find("td:eq(7)").hide();
                        } else {
                            $("table tr").find("th:eq(7)").show();
                            $("table tr").find("td:eq(7)").show();
                        }
                    },
                    handlesubtotal: function () {
                        if (this.subtotal_show == 'false') {
                            $("table tr").find("th:eq(8)").hide();
                            $("table tr").find("td:eq(8)").hide();
                        } else {
                            $("table tr").find("th:eq(8)").show();
                            $("table tr").find("td:eq(8)").show();
                        }
                    }
                }

            });
            $(function () {
                if (vm.subtotal_show == 'false') {
                    $("table tr").find("th:eq(8)").hide();
                    $("table tr").find("td:eq(8)").hide();
                }
                if (vm.extra_fee_show == 'false') {
                    $("table tr").find("th:eq(7)").hide();
                    $("table tr").find("td:eq(7)").hide();
                }
            })
        </script>
<?php echo $this->render('/public/footer'); ?>